<!-- 教材管理 -->

<script setup>
import {ref, reactive, onMounted, getCurrentInstance} from 'vue';
import {useRouter} from 'vue-router';
import {useStore} from 'vuex';

const {proxy} = getCurrentInstance();
const store = useStore();
const router = useRouter();

const keyword = ref('');
const courseInfoData = ref([]);
const editFormData = reactive({
  courseNo: '',
  courseName: '',
  courseAttr: '',
  publisher: '',
  remark: '',
});
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const visibleForm = ref(false);
const editFormRules = reactive({
  courseName: [
    {required: true, message: '请输入教材名', trigger: 'blur'},
  ],
  courseNo: [
    {required: true, message: '课程属性，01:语数英，02:物化生政史地,03:实验课,04:体育课', trigger: 'blur'},
  ],
  courseAttr: [
    {required: true, message: '请输入课程编号', trigger: 'blur'},
  ]
});

onMounted(() => {
  allCourseInfo();
});

const inputListener = () => {
  allCourseInfo();
}

const searchCourse = async () => {
  page.value = 1;

  const result = await proxy.$api.searchCourseinfo(page.value, keyword.value)

  courseInfoData.value = result.records;
  total.value = result.total;
  ElMessage({message: '查询成功', type: 'success'});
}

const addInfo = async () => {
  // this.type = 2
  visibleForm.value = true;
  //后端生成一个请求编号
  const result = await proxy.$api.CourseInfoGetno();

  editFormData.courseNo = result.courseNo;
}

const validateForm = () => {
  return new Promise((resolve) => {
    proxy.$refs.editFormRef.validate((valid) => {
      resolve(valid);
    });
  });
};
const commit = async () => {
  // if (editFormData.courseName === '') {
  //   ElMessage.error('请输入教材名');
  //   return;
  // }
  // if (editFormData.courseAttr === '') {
  //   ElMessage.error('请输入课程属性');
  //   return;
  // }
  // if (editFormData.courseNo === '') {
  //   ElMessage.error('请输入课程编号');
  //   return;
  // }
  const valid = await validateForm();
  if (!valid) {
    ElMessage.error('请输入对应参数');
    return;
  }
  if (editFormData.id == '' || editFormData.id == undefined) {
    // 添加操作
    add();
  } else {
    // 更新操作
    modifyCourseInfo(editFormData);
  }
}

const cancel = () => {
  visibleForm.value = false;
  editFormData.courseName = '';
  editFormData.courseAttr = '';
  editFormData.publisher = '';
  editFormData.remark = '';
}

const handleSizeChange = () => {
}

const handleCurrentChange = (v) => {
  page.value = v;
  if (keyword.value === '') {
    allCourseInfo();
  } else {
    searchCourse();
  }
}

const deleteById = (index, row) => {
  deleteCourseInfoById(row.id);
}

const editById = (index, row) => {
  visibleForm.value = true;
  editFormData.id = row.id;
  editFormData.courseNo = row.courseNo;
  editFormData.courseName = row.courseName;
  editFormData.courseAttr = row.courseAttr;
  editFormData.publisher = row.publisher;
  editFormData.remark = row.remark;
}

// 分页查询所有教材信息
const allCourseInfo = async () => {
  const result = await proxy.$api.allCourseInfo(page.value);
  courseInfoData.value = result.records;
  total.value = result.total;
}

// 添加教材
const add = async () => {
  const result = await proxy.$api.addCourseInfo(editFormData)

  ElMessage({message: '添加成功', type: 'success'});
  allCourseInfo();
  visibleForm.value = false;
  editFormData.value = {};
}

// 根据id删除教材信息
const deleteCourseInfoById = async (id) => {
  await proxy.$api.deleteCourseInfoById(id);
  allCourseInfo();
  ElMessage({message: '删除成功', type: 'success'});
}

// 更新教材信息
const modifyCourseInfo = async (modifyData) => {
  await proxy.$api.modifyCourseInfo(modifyData.id, modifyData);
  ElMessage({message: '更新成功', type: 'success'});
  allCourseInfo();
  visibleForm.value = false;
}
</script>

<template>
  <div>
    <div class="header-menu">
      <div style="width: 60%;display: flex;">
        <el-input
            placeholder="搜索教材"
            v-model="keyword"
            @clear="inputListener"
            clearable
        >
        </el-input>
        <el-button icon="Search" slot="append" type="primary" @click="searchCourse">搜索</el-button>
      </div>
      <el-button style="width: 8%" slot="append" type="primary" @click="addInfo">新增</el-button>
    </div>
    <!-- 教材信息 -->
    <el-table :data="courseInfoData" size="mini" :stripe="true" :highlight-current-row="true">
      <el-table-column label="序号" type="selection"></el-table-column>
      <el-table-column prop="courseNo" label="课程编号"></el-table-column>
      <el-table-column prop="courseName" label="课程名"></el-table-column>
      <el-table-column prop="courseAttr" label="课程属性"></el-table-column>
      <el-table-column prop="publisher" label="出版社"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column prop="operation" label="操作">
        <template #default="scope">
          <el-button type="danger" size="mini" @click="deleteById(scope.$index, scope.row)">删除</el-button>
          <el-button type="primary" size="mini" @click="editById(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出表单编辑教材信息 -->
    <el-dialog v-model="visibleForm">
      <el-form :model="editFormData" label-position="left" ref="editFormRef" label-width="80px" :rules="editFormRules">
        <el-form-item label="课程编号" prop="courseNo">
          <el-input v-model="editFormData.courseNo" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="课程名称" prop="courseName">
          <el-input v-model="editFormData.courseName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程属性" prop="courseAttr">
          <el-input v-model="editFormData.courseAttr" autocomplete="off"
                    placeholder="课程属性，01:语数英，02:物化生政史地,03:实验课,04:体育课"></el-input>
        </el-form-item>
        <el-form-item label="出版社" prop="publisher">
          <el-input v-model="editFormData.publisher" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="editFormData.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="commit">提 交</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <div class="footer-button">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<style scoped lang="less">
.footer-button {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}

.el-input-group {
  width: 40%;
}

.header-menu {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0;
  text-align: left;
}
</style>